<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-form" target="_blank">npm 地址</a></ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="案例展示">
        <ph-preview url="/form-free"/>
        <div style="padding:10px;"/>
        <form-demo/>
      </ph-tab-panel>
      <ph-tab-panel title="template/style">
        <ph-pretty>{{ template }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="javascript">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import {
  PhView,
  PhTabPanel,
  PhTab,
  PhBlockquote
} from "@/components";
import FormDemo from './free/form.vue'
import * as Data from "../data/form";
export default defineComponent({
  components: {
    PhView,
    FormDemo,
    PhTabPanel,
    PhTab,
    PhBlockquote
  },
  setup(){
    return {
      ...Data,
    }
  },
});
</script>
